<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header />
    <!-- 主体部分 -->
    <div class="app-main">
      <!-- 左侧 -->
      <div class="app-left">
        <div class="app-left-item">
          <subheadings :name="'房屋加固改造信息服务系统'" />
          <SystemCondition />
        </div>
        <div class="app-left-item">
          <subheadings :name="'近五年数据采集情况'" />
          <CollectSituation />
        </div>
        <div class="app-left-item">
          <subheadings :name="'各省（直辖市）已提交房屋数量统计'" />
          <BarChart />
        </div>
      </div>
      <!-- 中心部分 -->
      <div class="app-center">
        <!-- 标题 -->
        <headline :name="'全国房屋加固改造信息'" />
        <!-- 地图 -->
        <div class="app-map">
          <SystemSelect :styles="{ position: 'absolute', top: '0px', left: '42px' }" />
          <!-- <IndexMap></IndexMap> -->
          <OlMap :refId="'buildhouse'" style="height: 100%" @getMap="getMap"></OlMap>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="app-right">
        <div class="app-right-item">
          <subheadings :name="'审核采集入库情况'" />
          <WareHousing @getType="getType" />
        </div>
        <div class="app-right-item">
          <subheadings :name="'房屋设施加固工程典型案例统计'" />
          <CaseStatistics />
        </div>
        <div class="app-right-item">
          <subheadings :name="'房屋加固典型案例'" />
          <ClassicCase />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import SystemCondition from './components/SystemCondition.vue';
import CollectSituation from './components/CollectSituation.vue';
import ClassicCase from './components/ClassicCase.vue';
import BarChart from './components/BarChart.vue';
import WareHousing from './components/WareHousing.vue';
import CaseStatistics from './components/CaseStatistics.vue';
import { useRouter } from 'vue-router';

import OlMap from '@/components/Olmap';
import { DoubleClickZoom, MouseWheelZoom, DragPan } from 'ol/interaction';
import { Style, Circle as CircleStyle, Fill, Stroke, Text, Icon } from 'ol/style';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { GeoJSON as GeoJSonFormat } from 'ol/format';
import { Select } from 'ol/interaction';
import point_house_img from '@/assets/map/image/newImage/point_house.png';
import { getChinaBaseMap, getBaseDir } from '@/map/projMap.js';
import { getHouseNumCount } from '@/api/buildHouse.js';

const mapInstance = ref(null);
const vectorLayer = ref(null);
const overlayLayer = ref(null);
const pointsLayer = ref(null);
const selectInteraction = ref(null); // 选择交互对象
const pointsData = ref(null);
const router = useRouter();

const getMap = (map) => {
  mapInstance.value = map.value;

  addProvinceNameLayer();
  getMapData();
};

function getMapData() {
  getHouseNumCount().then((res) => {
    pointsData.value = res.data;
    console.log('===============res: ', res);
    showPointsLayer();
  });
}

function addProvinceNameLayer() {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap,
    format: new GeoJSonFormat(),
  });

  // 创建省份名称文本图层
  const textLayer = new VectorLayer({
    source: geojsonSource,
    zIndex: 2,
    style: function (feature) {
      const textstyle = new Style({
        text: new Text({
          font: '10px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          text: feature.get('name'),
        }),
      });
      return textstyle;
    },
  });

  mapInstance.value.addLayer(textLayer);
}

function showPointsLayer() {
  if (pointsLayer.value) {
    pointsLayer.value.setVisible(true);
    return;
  }

  pointsLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 3,
  });

  mapInstance.value.addLayer(pointsLayer.value);

  if (!pointsData || !pointsData.value) return;
  pointsData.value.forEach((item) => {
    const lon = item.longitude;
    const lat = item.latitude;
    const newProjectNum = item.newProjectNum;
    const reinforceProjectNum = item.reinforceProjectNum;
    let c1 = 'rgba(70,255,255,1)';
    let c2 = 'rgba(205,150,94,1)';

    const point = new Feature({
      geometry: new Point([lon, lat]),
    });

    const style1 = new Style({
      image: new Icon({
        src: point_house_img,
        anchor: [0.5, 1],
        scale: 1.0,
      }),
      text: new Text({
        text: '新建 ' + newProjectNum,
        font: '11px Calibri,sans-serif',
        fill: new Fill({ color: c1 }),
        offsetY: -68, // 设置文本相对于图标的纵向偏移量
      }),
    });
    const style2 = new Style({
      text: new Text({
        text: '加固 ' + reinforceProjectNum,
        font: '11px Calibri,sans-serif',
        fill: new Fill({ color: c2 }),
        offsetY: -53, // 设置文本相对于图标的纵向偏移量
      }),
    });
    point.setStyle([style1, style2]);
    pointsLayer.value.getSource().addFeature(point);
  });
}

const setupSelectInteraction = () => {
  // 监听地图的点击事件
  mapInstance.value.on('click', (event) => {
    const features = mapInstance.value.getFeaturesAtPixel(event.pixel);
    if (features.length > 0) {
      const selectedFeature = features[0];
      // 在这里添加处理点击事件的逻辑
      console.log('点击了要素：', selectedFeature.getProperties());
    }
  });
};
const createOverlayLayer = () => {
  overlayLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 9999,
  });
  mapInstance.value.addLayer(overlayLayer.value);
};
const createVectorLayer = () => {
  vectorLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 2,
  });
  mapInstance.value.addLayer(vectorLayer.value);
};
const addRandomPoints = () => {
  if (!vectorLayer.value) {
    return;
  }
  const provinces = [
    { lonMin: 97.35, lonMax: 108.16, latMin: 26.0, latMax: 34.91 }, // 四川
    { lonMin: 78.0, lonMax: 99.12, latMin: 26.0, latMax: 36.3 }, // 西藏
    { lonMin: 105.66, lonMax: 110.19, latMin: 28.03, latMax: 32.13 }, // 重庆
  ];

  for (let i = 0; i < 100; i++) {
    const province = provinces[Math.floor(Math.random() * provinces.length)];
    const lon = Math.random() * (province.lonMax - province.lonMin) + province.lonMin;
    const lat = Math.random() * (province.latMax - province.latMin) + province.latMin;
    const color = getRandomColor();

    const point = new Feature({
      geometry: new Point([lon, lat]),
    });

    const style = new Style({
      image: new CircleStyle({
        radius: 8,
        fill: new Fill({ color }),
        stroke: null, // 取消边框
      }),
    });

    point.setStyle(style);
    vectorLayer.value.getSource().addFeature(point);
  }
};

const getRandomColor = () => {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  return `#${'0'.repeat(6 - randomColor.length)}${randomColor}`;
};

const getType = (params) => {
  console.log(params);

  if (params == 2) {
    router.push('/buildHouse/houseNew');
  } else if (params == 1) {
    router.push('/buildHouse/houseReinforce');
  }
};
</script>

<style scoped lang="scss">
.app-container {
  min-height: 1080px;
}
.app-main {
  display: flex;
  justify-content: space-between;
  .app-left {
    margin-left: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: calc(100% - 40px);*/
    width: 450px;
    &-total {
      width: 450px;
      height: 80px;
      background-size: 100% 100%;
      background-image: url('../../assets/images/losses/title.png');
      font-size: 22px;
      color: #46ffff;
      line-height: 80px;
      padding-left: 120px;
      box-sizing: border-box;
      display: flex;
      position: absolute;
      top: 100px;
      span {
        font-family: DS-Digital;
        font-weight: 600;
        font-size: 36px;
        padding-top: 22px;
        display: flex;
        margin-left: 8px;
        i {
          display: block;
          width: 26px;
          height: 36px;
          background: #004c86;
          margin: 0 2px;
          font-style: normal;
          line-height: 36px;
          text-align: center;
        }
      }
    }

    &-item {
      width: 450px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(1) {
        height: 300px;
      }
      &:nth-child(2) {
        height: 300px;
      }
      &:nth-child(3) {
        height: 300px;
      }
    }
  }

  .app-map {
    width: 960px;
    height: 100%;
    //overflow: hidden; //test
    position: relative;
  }
  .app-right {
    margin-right: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: calc(100% - 40px);*/
    width: 450px;

    &-item {
      width: 450px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(1) {
        height: 200px;
      }
      &:nth-child(2) {
        height: 300px;
      }
      &:nth-child(3) {
        height: 400px;
      }
    }
  }
}
</style>
